<template>
  <div class="app-container" style="background: #ebeff4;margin:10px; padding-top: 9px; padding-bottom: 9px; ">
    <el-row :gutter="20">
      <el-row>
        <el-col :span="24">
          <el-card class="update-log">
            <div class="body" >
              <h5 style="font-size: 14px; color: #252B3A; font-weight: 700; margin-bottom: 0px;"  >
                订单号：{{ showitems.ddh }}</h5>
              <div style="margin-top: 20px; height: 62px;background-color: #edfff9;border-top: 3px solid #50d4ab;">
                <div style="display: inline-block; margin: 15px 0 0 15px;">
                  <div style="display: inline-block;">
                    <div style="display: inline-block;">
                      <!-- https://res.hc-cdn.com/partnercenter/8.3.283/qiankun/orderStatus_4.4235cbb24279cd44.svg -->
                      <span
                        style="display: inline-block; vertical-align: bottom;background-image: url(https://res.hc-cdn.com/partnercenter/8.3.280/qiankun/orderStatus_5.8dcac579f023533e.svg);background-size: 24px 24px;width: 24px;height: 24px;"></span>
                      <span
                        style="display: inline-block; color: #252B3A; font-size: 14px; margin-right: 15px; margin-left: 15px; vertical-align: middle;"><dict-tag
                          :options="dict.type.sys_order_state" :value="showitems.ddzt" /></span>
                    </div>
                    <div style="display: inline-block;">
                      <span>|</span>
                      <span class="middle" style="color: #575D6C; font-size: 14px; margin-right: 5px; margin-left: 15px;">
                        实付金额
                      </span>
                      <span>
                        <span class="middle" style="color: #252B3A; font-size: 14px; margin-right: 5px;">¥{{
                          showitems.sfje }}</span>
                      </span>
                    </div>
                    <div style="display: inline-block; line-height: initial;">
                      <span class="middle">(</span>
                      <div style="display: inline-block; vertical-align: middle; margin-left: 3px;">
                        <span style="color: rgb(87, 93, 108); margin-right: 0px;">已优惠 渠道商务合同折扣 ¥{{
                          toFixed(showitems.ddje - showitems.sfje) }}</span>
                      </div>
                      <span class="middle">)</span>
                    </div>
                  </div>
                </div>
              </div>
              <el-row>
                <el-row>
                  <el-col :span="12">
                    <p style="font-size: 13px;color: #575d6c;">
                      客户名称<a style="color: #575d6c;margin-left: 150px;" href="javascript:;">{{ showitems.zhmc }}</a>
                    </p>
                  </el-col>
                  <el-col :span="12">
                    <p style="font-size: 13px;color: #575d6c;">
                      帐号名称<a style="color: #575d6c;margin-left: 150px;" href="javascript:;">{{ showitems.zhcode
                      }}</a>
                    </p>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <p style="font-size: 13px;color: #575d6c;">

                      下单时间<a style="color: #575d6c;margin-left: 150px;" href="javascript:;">{{
                        parseTime(showitems.xdsj,
                          '{y}-{m}-{d} {hh}:{mm}') }}</a>
                    </p>
                  </el-col>
                  <el-col :span="12">
                    <p style="font-size: 13px;color: #575d6c;">
                      产品类型<a style="color: #575d6c;margin-left: 150px;" href="javascript:;">{{ showitems.cplx }}</a>
                    </p>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <p style="font-size: 13px;color: #575d6c;">
                      支付方式<a style="color: #575d6c;margin-left: 150px;" href="javascript:;">客户支付</a>
                    </p>
                  </el-col>
                  <el-col :span="12">
                    <p style="font-size: 13px;color: #575d6c;">
                      订单类型<a style="color: #575d6c;margin-left: 150px;" href="javascript:;">{{ showitems.ddlx == 1 ?
                        '开通' : showitems.ddlx == 2 ? '续订' :
                          showitems.ddlx == 3 ? '变更' : showitems.ddlx == 4 ? '退订' : showitems.ddlx == 11 ?
                            '按需转包年/包月' : showitems.ddlx == 13 ? '试用' : showitems.ddlx == 14 ? '转商用' : showitems.ddlx ==
                              15 ?
                              '费用调整' : '其它' }}</a>
                    </p>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <p style="font-size: 13px;color: #575d6c;">
                      支付时间<a style="color: #575d6c;margin-left: 150px;" href="javascript:;">{{
                        parseTime(showitems.zfsj,
                          '{y}-{m}-{d} {hh}:{mm}') }}</a>
                    </p>
                  </el-col>

                </el-row>
              </el-row>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-row>
    <el-row :gutter="20" style="margin-top: 10px;">
      <el-row>
        <el-col :span="24">
          <el-card class="update-log">
            <div class="body">
              <h5 style="font-size: 14px; color: #252B3A; font-weight: 700;margin-top: 20px;margin-bottom: 20px;">
                资源信息
              </h5>
              <el-table border="" v-loading="loading" :data="customerorderListItem"
                :header-cell-style="{ background: '#eef1f6', color: '#606266' }">
                <el-table-column label="产品类型" align="center" prop="serviceTypeName" />
                <el-table-column label="产品规格" align="center" prop="productSpecDesc" />
                <el-table-column label="计费模式" align="center">
                  <template slot-scope="scope">
                    <div>包年/包月</div>
                    <div>{{ scope.row.periodNum }}{{ scope.row.periodType == 0 ? '天' : scope.row.periodType == 1 ?
                      '周' :
                      scope.row.periodType == 2 ? '个月' : scope.row.periodType == 3 ? '年' : scope.row.periodType == 4
                        ?
                        '小时' : scope.row.periodType == 5 ? '一次性' : '其它' }}</div>
                  </template>
                </el-table-column>
                <el-table-column label="起止时间" align="center" width="180">
                  <template slot-scope="scope">
                    <div>{{ parseTime(scope.row.effectiveTime, "{y}-{m}-{d} {hh}:{mm}:{ss}") }}</div>
                    <div>{{ parseTime(scope.row.expireTime, "{y}-{m}-{d} {hh}:{mm}:{ss}") }}</div>
                  </template>
                </el-table-column>
                <el-table-column label="数量" align="center" prop="subscriptionNum" />
                <el-table-column label="订单金额(¥)" align="right" prop="officialAmount"  width="120"/>
                <el-table-column label="实付金额(¥)" align="right" prop="amountAfterDiscount" />
              </el-table>

              <div id="orderDetail_amount" style="font-size: 14px; margin-top: 20px; text-align: right;">
                <div style="padding-right: 10px;">
                  <div style="padding: 15px 0;">
                    <span style="color: #575D6C; margin-right: 30px;">订单金额</span>
                    <span style="display: inline-block; min-width: 140px; margin-left: 5px; color: #575D6C;">
                      ¥{{ showitems.ddje }}</span>
                  </div>
                  <div>
                    <span style="color: #575D6C; margin-right: 30px;">促销折扣(促销，只有包周期场景)</span>
                    <span style="display: inline-block; min-width: 140px; margin-left: 5px; color: #575D6C;">-¥{{
                      toFixed(showitems.ddje - showitems.sfje) }}</span>
                  </div>
                  <div
                    style="margin-top: 10px; max-height: 470px; width: 100%; border-width: 0.5px; border-style: solid; border-color: rgba(229, 229, 229, 1); float: right; width: 340px;">
                  </div>
                  <div style="text-align: right; font-size: 14px; margin-top: 10px;">
                    <div style="padding: 15px 0;">
                      <span style="color: #575D6C; margin-right: 30px;">应付金额</span>
                      <span style="display: inline-block; min-width: 140px; margin-left: 5px; color: #575D6C;">
                        ¥{{ showitems.sfje }}</span>
                    </div>
                  </div>
                </div>
                <div id="block_point" style="margin-right: 30px; width: 100%;">
                  <div style="position: relative; left: calc(100% - 350px); top: -10px; width: 350px;">
                    <div
                      style="width: 350px; background-color: #F2F5FC; padding-right: 10px; margin-top: 10px; margin-bottom: 50px;">
                      <div style="padding: 5px 0;">
                        <span style="color: #575D6C; margin-right: 30px;">实付金额</span>
                        <span
                          style="display: inline-block; min-width: 140px; margin-left: 5px; font-size: 20px; color: #FF4C4C; line-height: 32px;">
                          ¥{{ showitems.sfje }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-row>
  </div>
</template>

<script>
import { listCustomerorderAll, insertxq, listCustomerorderItem } from "@/api/CustomerorderMain/customerorder";
export default {
  dicts: ["sys_order_type", "sys_order_state"],

  name: "orderxx",
  props: {
    oid: String,
    opid: String,
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      deaval: {
        //分配时，传值的parm
        orderId: this.oid,
        indirectPartnerId: this.opid,
      },
      vala:this.oid,
      showitems:
      {
        //订单详情变量
        ddh: null,
        ddje: null,
        sfje: null,
        zhmc: null,
        zhcode: null,
        xdsj: null,
        cplx: null,

        ddlx: null,
        zfsj: null,
        ddzt: null,
      },
      customerorderListItem: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderId: null,

      },
    };
  },

  created() {

    this.deaval.orderId = this.oid;
    this.deaval.indirectPartnerId = this.opid;

    //查询订单详情
    this.showitems.ddh = this.deaval.orderId;
    this.queryParams.orderId = this.deaval.orderId;
    //原先取的listCustomerorder,会导致业务员看不到详情信息
    listCustomerorderAll(this.queryParams).then(response => {
      this.showitems.zhmc = response.rows[0].customer;
      this.showitems.zhcode = response.rows[0].accountName;
      this.showitems.xdsj = response.rows[0].createTime1;
      this.showitems.zfsj = response.rows[0].paymentTime;
      this.showitems.cplx = response.rows[0].serviceTypeName;
      this.showitems.ddlx = response.rows[0].orderType;
      this.showitems.ddje = response.rows[0].officialAmount;
      this.showitems.sfje = response.rows[0].amountAfterDiscount;
      this.showitems.ddzt = response.rows[0].status;
    });
 
   
    insertxq(this.deaval).then(response => {
 
      this.getListItem();
    });

  },
  methods: {
    //保留两位，不足补位
    toFixed(num) {
      return (Math.round(num * 100) / 100).toFixed(2);
    },
    /** 查询订单详情列表 */
    getListItem() {
      listCustomerorderItem(this.deaval).then(response => {
        this.customerorderListItem = response.rows;
        this.loading = false;
      });
    },
 
  },
};
</script>
